<template>
	   <view>
		   	<view class="search-box">
		   		<mSearch class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword" @search="doSearch(false)"  @setflag="setflag" @input="inputChange" @confirm="doSearch(false)" v-model="keyword"></mSearch>
		   	</view>
		   	<view class="search-keyword" >
		   		<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
		   			<block v-for="(row,index) in keywordList" :key="index">
		   				<view class="keyword-entry" hover-class="keyword-entry-tap" >
		   					<view class="keyword-text" @tap.stop="doSearch(keywordList[index].keyword)">
		   						<rich-text :nodes="row.htmlStr"></rich-text>
		   					</view>
		   					<view class="keyword-img" @tap.stop="setKeyword(keywordList[index].keyword)">
		   						<image src="/static/HM-search/back.png"></image>
		   					</view>
		   				</view>
		   			</block>
		   		</scroll-view>
		   		<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
		   		</scroll-view>
				  <uni-category :leftArray="pararr"  ref="children" v-show="flag" :leftIndex="leftIndex"  :chil="chil" @getbyid="getbyid"></uni-category>
		   	</view>
		    <!-- 悬浮导航-->
		    <sa-hover-menu :flag1="flag1"></sa-hover-menu>	
	  <mask-model ref="showMask" btnType="1" :titleContext="titleContext" @confirm="confirm" @cancel="cancel" :titleColoe="color" :cancelColor="color" :confirmColor="color" :maskTitle="maskTitle"></mask-model>
   </view>
</template>

<script>
	import saHoverMenu from '../../components/sa-hover-menu/sa-hover-menu.vue';
    import { encryptDes, decryptDes  } from '@/common/des.js' 
	import maskModel from '../../components/mask-model/mask-model.vue'
	import uniCategory from '../../components/uni-category/uni-category.vue'
	//引用mSearch组件，如不需要删除即可
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	export default {
		components: {
			uniCategory,
			maskModel,
			mSearch,
			saHoverMenu
		},
		data() {
			return {
				flag1:0,
				color:this.$kdup.color,
				titleContext:"",
				maskTitle:'',//更新内容提示
				pararr: [{
					id: "0",
					name: "全部"
				}],
				chil: [],
				leftIndex:0,
				defaultKeyword: "",
				keyword: "",
				oldKeywordList: [],
				hotKeywordList: [],
				keywordList: [],
				forbid: '',
				isShowKeywordList: false,
				flag:true,
				fmater:[]  //165368报表管理下面模块， 123153//生成管理下面模块
			
			}
		},
		onShow() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",	//文字颜色
				backgroundColor: this.$kdup.color	//底部背景色
			})
			if(this.$kdup.userInfo.userid == 0){
				uni.navigateTo({
					url: '/pages/login/login?urlpage=/pages/bill/bill'
				});
				return;
			}
			var data = {
				moduleId:uni.getStorageSync('id'),
				billtypeId: 0
			}
			this.$myRequest.postRequest("GetBarcodeModule", data).then(res => {
				if (res.data.error == "") {
					//找到数据
					//获取以一级菜单 默认设置全部
					//看版对象
					
					this.chil = []
					for (var i = 0; i < res.data.Table.length; i++) {
						var a=res.data.Table[i].fmoduleid;
						var b=res.data.Table[i].fmodulename;
						this.pararr.push({
							id: res.data.Table[i].fmoduleid,
							name: res.data.Table[i].fmodulename
						})
						this.chil.push({
							id: res.data.Table[i].fconfigid,
							name: res.data.Table[i].fconfigname,
							number: res.data.Table[i].number,
							fmodulename:res.data.Table[i].fmodulename
						})
					}
					//过滤重复
					this.pararr = this.unique(this.pararr);
				
	
				} else {
					//未找到数据
					uni.showToast({
						title: res.data.error,
						icon: "none"
					});
				}
			})
		},
		onReady() {
		    let buttons =uni.getStorageSync("username")
		    // #ifdef APP-PLUS
		    var currentWebview = this.$mp.page.$getAppWebview();
		    var tn = currentWebview.getStyle().titleNView;   
		    tn.buttons[1].text = buttons;     //[0] 按钮的下标
		    currentWebview.setStyle({  
		    titleNView: tn  
		    });
		// #endif
		},
		onLoad() {
			uni.removeStorageSync('id')
			this.init();
		},
		methods: {
			init() {
				this.loadDefaultKeyword();
			},
			blur(){
				uni.hideKeyboard()
			},
			//加载默认搜索关键字
			loadDefaultKeyword() {
				//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
				this.defaultKeyword = "模块搜索";
			},
			//js模糊查询
			fuzzyQuery(list, keyWord) {
			    var arr = [];
			    for (var i = 0; i < list.length; i++) {
				  var row = list[i];
			      if (row[0].indexOf(keyWord) >= 0) {
			        arr.push(list[i]);
			      }
			    }
			    return arr;
			  },
			//处理数组格式
			setarrformate(arr){
			var array=[];
				for(var i=0;i<arr.length;i++){
				array.push([arr[i].name,arr[i].id,arr[i].fmodulename,arr[i].number])	
				}
				return array;
			},
			//监听输入
			inputChange(event) {
				//兼容引入组件时传入参数情况
				var keyword = event.detail?event.detail.value:event;
			    if(keyword==""){
					this.setflag();
				}
				if (!keyword) {
					this.keywordList = [];
					this.isShowKeywordList = false;
					return;
				}
				this.isShowKeywordList = true;
				//如果第一个是空额就清除
				keyword=keyword.trim();
				var data = {
					moduleId: 0,
					billtypeId: 0
				}
				this.$myRequest.postRequest("GetBarcodeModule", data).then(res => {
					if (res.data.error == "") {
						//找到数据
						//点击获取二级菜单
						this.chil = []
					
						for (var i = 0; i < res.data.Table.length; i++) {
							this.chil.push({
								id: res.data.Table[i].fconfigid,
								name: res.data.Table[i].fconfigname,
								number: res.data.Table[i].number,
								fmodulename:res.data.Table[i].fmodulename
							})
						}
					} else {
						//未找到数据
						uni.showToast({
							title: res.data.error,
							icon: "none"
						});
					}
				})
				var result=[];
				//处理数组格式
				this.fmater=[];
				this.fmater=this.setarrformate(this.chil);
				//js模糊查询
				result=this.fuzzyQuery(this.fmater,keyword);
				if(result.length==0){
					this.chil=this.fmater;
				}else{
					this.chil=result;
				}
				this.keywordList = [];
				this.keywordList = this.drawCorrelativeKeyword(this.chil, keyword);
			},
			//高亮关键字
			drawCorrelativeKeyword(keywords, keyword) {
				this.flag=false;
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i];
					//定义高亮#9f9f9f
					var html = row[0].replace(keyword, "<span style='color:"+this.color+";'>" + keyword + "</span>");
					html = "<div><em style='color: "+this.color+";'>"+ row[2] +"</em>&nbsp;🔯<label style='float:left; width:200px;color: "+this.color+";'>▶&nbsp;"+html+"</label>"+'</div>';
					var tmpObj = {
						keyword: row[0],
						htmlStr: html
					};
					keywordArr.push(tmpObj)
				}
				return keywordArr;
			},
			//修改状态
			setflag(){
				this.flag=true;
			},
			//执行搜索
			doSearch(keyword) {
				keyword = keyword===false?this.keyword:keyword;
				this.keyword = keyword;
				var obj={};
				for (var i = 0; i < this.fmater.length; i++) {
				  var row = this.fmater[i];
				  if (row[0]==keyword) {
				    obj={id:row[1],name:row[0],number:row[3],fmodulename:row[2]};
					break;
				  }
				}
				if (Object.keys(obj).length==0) {
				 uni.showToast({
				 	title: "找不到"+"‘"+keyword+"’"+"的模块！",
				 	icon: 'none',
				 	duration: 2000
				 });
				this.inputChange(keyword);
				}else{
					//调用跳转至页面
					uni.showLoading({title: '跳转中',mask:true});
					setTimeout(function () {uni.hideLoading();}, 600);
					this.$refs.children.rightTap(obj);
				}
			},
			getbyuser(name){
				var obj=JSON.parse(uni.getStorageSync("userlist"));
				for(var i=0;i<obj.length;i++){
					if(name==obj[i].name){
						obj[i].password=decryptDes(obj[i].password,"password");
						return obj[i];
					}
				}
			},
			confirm(){
			uni.reLaunch({
				url:'/pages/login/login'
			}); 
			},
			cancel(){
				uni.showToast({
					title:"已取消",
					icon: "none"
				});
			},
			//注销
			onNavigationBarButtonTap (e){  
			if(e.text=="注销"){
				this.titleContext="注销提示";
				this.maskTitle="是否退出登录?"
				this.$refs.showMask.show();
			} 
			//这里是点击登录的用户
			else{
				var msg;
				var model;
				var brand;
				var system;
				var platform;
				 uni.getSystemInfo({
				        success: function (res) {
							model=res.model;
							brand=res.brand;
							system=res.system;
							platform=res.platform;
				        }
				    }); 
					msg="当前登录用户："+uni.getStorageSync("username")+
					 // "\n\n密码："+this.getbyuser(uni.getStorageSync("username")).password+
					 //  "\n\n是否记住密码："+(!this.$kdup.isEmpty(uni.getStorageSync("password"))?"是":"否")+
					     "\n\n客户："+uni.getStorageSync("customer")+
						 "\n\n数据中心："+uni.getStorageSync("dbname")+
					     "\n\n当前连接服务器地址："+uni.getStorageSync("kdup_url");
					  //    "\n\n手机型号："+brand+
						 // "\n\n手机品牌："+model+
						 // "\n\n客户端平台："+platform+system;
						 
						 
						 uni.getStorageSync("userlist")
				      uni.showModal({
				          content: msg,
				          showCancel: true,
				          buttonText: '确定',
				          success: (res) => {
				         
				          }
				        })
			}
			},
			getbyid(data) {
				if(this.$kdup.userInfo.userid == 0){
					uni.navigateTo({
						url: '/pages/login/login?urlpage=/pages/bill/bill'
					});
					return;
				}
				this.leftIndex=data;
				var id = this.pararr[data].id;
				uni.setStorageSync('id',id)
				//查询全部
				if (id == 0) {
					var data = {
						moduleId: 0,
						billtypeId: 0
					}
					this.$myRequest.postRequest("GetBarcodeModule", data).then(res => {
						if (res.data.error == "") {
							//找到数据
							//点击获取二级菜单
							this.chil = []
							//看板显示
						
							for (var i = 0; i < res.data.Table.length; i++) {
								this.chil.push({
									id: res.data.Table[i].fconfigid,
									name: res.data.Table[i].fconfigname,
									number: res.data.Table[i].number,
								    fmodulename:res.data.Table[i].fmodulename
								})
							}
						} else {
							//未找到数据
							uni.showToast({
								title: res.data.error,
								icon: "none"
							});
						}
					})
				}else{  //根据id查询
					var data = {
						moduleId: id,
						billtypeId: 0
					}
					this.$myRequest.postRequest("GetBarcodeModule", data).then(res => {
						if (res.data.error == "") {
							//找到数据
							//点击获取二级菜单
							this.chil = []
						
							for (var i = 0; i < res.data.Table.length; i++) {
								this.chil.push({
									id: res.data.Table[i].fconfigid,
									name: res.data.Table[i].fconfigname,
									number: res.data.Table[i].number,
								    fmodulename:res.data.Table[i].fmodulename
								})
							}
						} else {
							//未找到数据
							uni.showToast({
								title: res.data.error,
								icon: "none"
							});
						}
					})
				}
			},
			unique(list) {
				var arr = [];
				for (var i = 0; i < list.length; i++) {
					if (i == 0) arr.push(list[i]);
					var b = false;
					if (arr.length > 0 && i > 0) {
						for (var j = 0; j < arr.length; j++) {
						
							if (arr[j].name == list[i].name) {
								b = true;
								//break;
							}
						}
						if (!b) {
							arr.push(list[i]);
						}
					}
				}
				return arr;
			}
		}
	}
</script>

<style>
view{display:block;}
	.search-box {width:95%;background-color:rgb(242,242,242);padding:15upx 2.5%;display:flex;justify-content:space-between;position:sticky;top: 0;z-index: 1;}
	.search-box .mSearch-input-box{width: 100%}
	.search-box .input-box {width:85%;flex-shrink:1;display:flex;justify-content:center;align-items:center;}
	.search-box .search-btn {width:15%;margin:0 0 0 2%;display:flex;justify-content:center;align-items:center;flex-shrink:0;font-size:28upx;color:#fff;background:linear-gradient(to right,#ff9801,#ff570a);border-radius:60upx;}
	.search-box .input-box>input {width:100%;height:60upx;font-size:32upx;border:0;border-radius:60upx;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 3%;margin:0;background-color:#ffffff;}
	.placeholder-class {color:#9e9e9e;}
	.search-keyword {width:100%;background-color:rgb(242,242,242);}
	.keyword-list-box {height:calc(100vh - 110upx);padding-top:10upx;border-radius:20upx 20upx 0 0;background-color:#fff;}
	.keyword-entry-tap {background-color:#eee;}
	.keyword-entry {width:94%;height:80upx;margin:0 3%;font-size:30upx;color:#333;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1upx #e7e7e7;}
	.keyword-entry image {width:60upx;height:60upx;}
	.keyword-entry .keyword-text,.keyword-entry .keyword-img {height:80upx;display:flex;align-items:center;}
	.keyword-entry .keyword-text {width:90%;}
	.keyword-entry .keyword-img {width:10%;justify-content:center;}
	.keyword-box .keyword-block {padding:10upx 0;}
	.keyword-box .keyword-block .keyword-list-header {width:94%;padding:10upx 3%;font-size:27upx;color:#333;display:flex;justify-content:space-between;}
	.keyword-box .keyword-block .keyword-list-header image {width:40upx;height:40upx;}
	.keyword-box .keyword-block .keyword {width:94%;padding:3px 3%;display:flex;flex-flow:wrap;justify-content:flex-start;}
	.keyword-box .keyword-block .hide-hot-tis {display:flex;justify-content:center;font-size:28upx;color:#6b6b6b;}
	.keyword-box .keyword-block .keyword>view {display:flex;justify-content:center;align-items:center;border-radius:60upx;padding:0 20upx;margin:10upx 20upx 10upx 0;height:60upx;font-size:28upx;background-color:rgb(242,242,242);color:#6b6b6b;}

</style>
